<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>编辑饮食计划</title>
    <style>
        /* 全局配色定义 - 绿色系和谐版 */
        :root {
            --primary-green: #4CAF50;       /* 主绿色 - 鲜绿 */
            --secondary-green: #388E3C;     /* 次绿色 - 深绿 */
            --tertiary-green: #81C784;      /* 三级绿 - 中绿 */
            --quaternary-green: #A5D6A7;    /* 四级绿 - 浅绿 */
            --light-green-bg: #E8F5E9;      /* 浅绿色背景 */
            --white: #fff;                  /* 白色 */
            --text-color: #333;             /* 主文本色 */
            --light-text: #555;             /* 次文本色 */
            --border-color: #D1E8D4;        /* 绿色边框 */
            --shadow-color: rgba(76, 175, 80, 0.08); /* 绿色系阴影 */
            --transition: all 0.3s ease;    /* 过渡效果 */
        }

        /* 基础样式 */
        body {
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: var(--light-green-bg);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 700px;
            margin: 30px auto;
            padding: 35px;
            background: var(--white);
            border-radius: 12px;
            box-shadow: 0 8px 24px var(--shadow-color);
        }

        /* 标题样式 */
        h2 {
            color: var(--secondary-green);
            margin-bottom: 28px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--quaternary-green);
            font-weight: 600;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
        }

        h2:before {
            content: "";
            display: inline-block;
            width: 24px;
            height: 24px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23388E3C" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/></svg>');
            margin-right: 12px;
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 28px;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 500;
            color: var(--text-color);
            font-size: 1.05rem;
        }

        .required-field::after {
            content: " *";
            color: #F44336;
            margin-left: 3px;
        }

        /* 输入框样式 */
        input[type="text"],
        input[type="date"],
        input[type="number"],
        select {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 1rem;
            transition: var(--transition);
        }

        input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="number"]:focus,
        select:focus {
            outline: none;
            border-color: var(--tertiary-green);
            box-shadow: 0 0 0 4px rgba(129, 199, 132, 0.2);
        }

        /* 按钮样式 */
        .btn {
            padding: 12px 30px;
            background-color: var(--primary-green);
            color: var(--white);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-weight: 500;
            font-size: 1rem;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
        }

        .btn:hover {
            background-color: var(--secondary-green);
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(76, 175, 80, 0.25);
        }

        .btn-cancel {
            background-color: #E57373;
            margin-left: 15px;
            box-shadow: 0 4px 12px rgba(229, 115, 115, 0.2);
        }

        .btn-cancel:hover {
            background-color: #EF5350;
        }

        /* 错误提示样式 */
        .error {
            color: #F44336;
            font-size: 0.9rem;
            margin-top: 6px;
            display: block;
            line-height: 1.3;
        }

        /* 只读字段样式 */
        .readonly-field {
            background-color: #f5f5f5;
            color: #666;
            cursor: not-allowed;
        }

        /* 操作按钮组 */
        .action-buttons {
            margin-top: 40px;
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>编辑饮食计划</h2>

    <form action="${pageContext.request.contextPath}/plan/edit" method="post">
        <input type="hidden" name="planid" value="${plan.planid}">

        <!-- 计划ID (只读) -->
        <div class="form-group">
            <label>计划ID</label>
            <input type="text" value="${plan.planid}" class="readonly-field" readonly>
        </div>

        <!-- 计划名称 -->
        <div class="form-group">
            <label for="planname" class="required-field">计划名称</label>
            <input type="text" id="planname" name="planname" required
                   value="${plan.planname}" placeholder="请输入计划名称">
            <span class="error">${errors.planname}</span>
        </div>

        <!-- 用户ID -->
        <div class="form-group">
            <label for="userid" class="required-field">用户ID</label>
            <input type="number" id="userid" name="userid" required
                   value="${plan.userid}" placeholder="请输入用户ID">
            <span class="error">${errors.userid}</span>
        </div>

        <!-- 开始日期 -->
        <div class="form-group">
            <label for="stardate" class="required-field">开始日期</label>
            <input type="date" id="stardate" name="stardate" required
                   value="${plan.stardate}">
            <span class="error">${errors.stardate}</span>
        </div>

        <!-- 结束日期 -->
        <div class="form-group">
            <label for="enddate" class="required-field">结束日期</label>
            <input type="date" id="enddate" name="enddate" required
                   value="${plan.enddate}">
            <span class="error">${errors.enddate}</span>
        </div>

        <!-- 创建时间 (只读) -->
        <div class="form-group">
            <label>创建时间</label>
            <input type="text" value="${plan.createtime}" class="readonly-field" readonly>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button type="submit" class="btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 8px;">
                    <path d="M2 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/>
                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                </svg>
                保存更改
            </button>
            <a href="${pageContext.request.contextPath}/plan/list" class="btn btn-cancel">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 8px;">
                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
                取消返回
            </a>
        </div>
    </form>
</div>
</body>
</html>